<script setup>
import { ref, onMounted, reactive, h } from 'vue'
import { ElNotification } from 'element-plus'
import { getSights, insertSight, selectOne, update, deleteById } from '../http/sight'
// import { ref } from '@vue/reactivity'
const sightList = ref([])

// 重置按钮是否禁用,默认开启
const resetB = ref(false)

// 是否显示表单
const isShow = ref(false)

// 确认显示表单
const showForm = () => {
  isShow.value = true
}
// 不显示表单
const notShowForm = (formEl) => {
  isShow.value = false
  resetB.value = false
  if (!formEl) return
  formEl.resetFields()
}

// 提交表单
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      // console.log(sightForm)
      if (sightForm.value.sightId !== null) {
        const a = (await update(sightForm.value)).data
        if (a === 1) {
          ElNotification({
            title: '提示',
            message: h('i', { style: 'color: teal' }, '更新成功')
          })
        }
        resetB.value = false
      } else {
        const a = (await insertSight(sightForm.value)).data
        if (a === 1) {
          ElNotification({
            title: '提示',
            message: h('i', { style: 'color: teal' }, '添加成功')
          })
        }
      }
      // 重置表单
      formEl.resetFields()
      // 关闭表单
      notShowForm()
      // 刷新表格
      getAll()
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 为了重置表单，没搞懂，先用着
const ruleFormRef = ref()

// 表单规则
const rules = reactive({
  sightName: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 30, message: 'Length should be 3 to 30', trigger: 'blur' }
  ],
  sceneType: [
    { required: true, message: 'Please input Activity type', trigger: 'blur' },
    { min: 1, max: 30, message: 'Length should be 1 to 30', trigger: 'blur' }
  ],
  sceneAdder: [
    { required: true, message: 'Please input Activity address', trigger: 'blur' },
    { min: 3, max: 200, message: 'Length should be 3 to 200', trigger: 'blur' }
  ]
})

// 本体表单
const sightForm = ref({
  sightId: null,
  sightName: '',
  sceneType: '',
  introduce: '',
  sceneAdder: '',
  sceneStar: '1A'
})
// 重置表单
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

// 点击更新显示表单
const handleEdit = async (index, row) => {
  sightForm.value = await selectOne(row.sightId)
  resetB.value = true
  showForm()
  console.log(sightForm.value)
}
// 点击删除确认后删除
const handleDelete = async (index, row) => {
  // console.log(index, row)
  const a = await deleteById(row.sightId)
  if (a === 1) {
    ElNotification({
      title: '提示',
      message: h('i', { style: 'color: red' }, '删除成功')
    })
  }
  getAll()
}
// 获取所有列表
const getAll = async () => {
  sightList.value = (await getSights()).data
  // console.log(sightList)
}
onMounted(async () => {
  // sightList.value = (await getSights()).data
  getAll()
  // console.log(sightList)
})

</script>

<template>
  <el-tab-pane class="test">
    <template #label>
      <span class="tab-item">景点管理</span>
    </template>
    <div class="content-container">
      <div class="table">
        <el-table :data="sightList" :border="parentBorder">
          <el-table-column type="expand">
            <template #default="props">
              <div m="4">
                <p m="t-0 b-2">
                  <strong>景点id:</strong> {{ props.row.sightId }}
                </p>
                <p m="t-0 b-2">
                  <strong>名称:</strong> {{ props.row.sightName }}
                </p>
                <p m="t-0 b-2">
                  <strong>类型:</strong> {{ props.row.sceneType }}
                </p>
                <p m="t-0 b-2">
                  <strong>星级:</strong> {{ props.row.sceneStar }}
                </p>
                <p m="t-0 b-2">
                  <strong>地址:</strong> {{ props.row.sceneAdder }}
                </p>
                <p m="t-0 b-2" style="width: 45%">
                  <strong>介绍:</strong> {{ props.row.introduce }}
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="sightName" />
          <el-table-column label="星级" prop="sceneStar" />
          <el-table-column align="center" label="操作">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                >Edit</el-button
              >
              <el-popconfirm
                confirm-button-text="Yes"
                cancel-button-text="No"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="Are you sure to delete this?"
                @confirm="handleDelete(scope.$index, scope.row)"
              >
                <template #reference>
                  <el-button type="danger" size="small">Delete</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="insertB">
        <el-button type="primary" @click="showForm" plain>添加景点信息</el-button>
      </div>

      <div class="formcard" v-show="isShow">
        <el-card class="box-card">
          <el-form ref="ruleFormRef" :model="sightForm" :rules="rules" :label-position="right" label-width="100px">
            <el-form-item label="景点名字: " prop="sightName">
              <el-col :span="20">
                <el-input v-model="sightForm.sightName" placeholder="Please input sight's name"/>
              </el-col>
            </el-form-item>
            <el-form-item label="景点类型: " prop="sceneType">
              <el-col :span="20">
                <el-input v-model="sightForm.sceneType" placeholder="Please input the sight's type"/>
              </el-col>
            </el-form-item>
            <el-form-item label="地址: " prop="sceneAdder">
              <el-col :span="20">
                <el-input v-model="sightForm.sceneAdder" placeholder="Please input address."/>
              </el-col>
            </el-form-item>
            <el-form-item label="星级: " prop="sceneStar">
              <el-select v-model="sightForm.sceneStar">
                <el-option label="5A" value="5A"></el-option>
                <el-option label="4A" value="4A"></el-option>
                <el-option label="3A" value="3A"></el-option>
                <el-option label="2A" value="2A"></el-option>
                <el-option label="1A" value="1A"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="介绍: " prop="introduce">
              <el-col :span="20">
                <el-input v-model="sightForm.introduce" placeholder="Please input the sight's introduce" type="textarea" :rows="5" resize='none'/>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
              <el-button :disabled="resetB" @click="resetForm(ruleFormRef)">重置</el-button>
              <el-button type="info" @click="notShowForm(ruleFormRef)">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

    </div>
  </el-tab-pane>
</template>

<style scoped>
.table{
  text-align: center;
  margin: 0 20px;
}

/* 添加按钮外层 */
.insertB{
  width: 0;
  margin-top: 25px;
  margin-left: 20px;
}

/* 内层form */
.formcard{
  /* margin: 25px 420px; */
  width: 500px
}

/* 外层卡片 */
.box-card{
  margin: 0px 420px;
  width: 100%;
}
</style>
